//定义图片懒加载插件
import {useIntersectionObserver} from '@vueuse/core'
export const lazyPlugin ={
  install(app){
 // 图片懒加载全局指令
app.directive('img-lazy',{
  mounted(el,binding){
     // el:指令绑定的那个元素 img
     //binding: binding.value 指令等于号后面绑定的表达式的值  ，图url的值
    // console.log(el,binding)
    
    const {stop}= useIntersectionObserver(
      el,([{isIntersecting}])=>{
       if(isIntersecting){
        el.src=binding.value
        stop() //防止重复监听
       }
      }
     )

  }
})
  }
}